<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>delegate</title>
</head>
<style>

    #fatherNode {
        width: 300px;
        height: 300px;
        padding: 50px;
        background: #000;
    }

    #sonNode {
        width: 200px;
        height: 200px;
        padding: 50px;
        background: #ccc;
    }

    #grandsonNode {
        width: 100px;
        height: 100px;
        background: #fff;
    }


</style>
<body>
    
    <div id="fatherNode">
        <div id="sonNode">
            <div id="grandsonNode">

            </div>
        </div>
    </div>

    <script>
        var fatherNode = document.getElementById('fatherNode');
        var sonNode = document.getElementById('sonNode');
        var grandsonNode = document.getElementById('grandsonNode');

        /* fatherNode.onclick = function () {
            console.log(arguments);
        } */

        fatherNode.addEventListener('click',(e)=>{
            if(e.target.id === 'sonNode'){
                console.log('sonNode');
            } else if (e.target.id === 'grandsonNode') {
                console.log('grandsonNode');
            } else {
                console.log('fatherNode');
            }
        },false);

        

    </script>

</body>
</html>